//
//  Home.swift
//  DesignCode
//
//  Created by Json on 2020/4/9.
//  Copyright © 2020 Json. All rights reserved.
//

import SwiftUI

let statusBarHeight = UIApplication.shared.statusBarFrame.height
let screen = UIScreen.main.bounds


struct Home: View {
    
    @State var show = false
    @State var showProfile = false
    
    var body: some View {
        ZStack {
            
            HomeList()
                .blur(radius: show ? 20 : 0)
                .scaleEffect(showProfile ? 0.6 : 1)
                .animation(.default)
            
            ContentView()
              //  .background(Color.white)  // 有背景颜色会取消模糊效果
                .frame(minWidth: 0, maxWidth: 712)
                .cornerRadius(30)
                .shadow(radius: 20)
                .animation(.spring())
                .offset(y: showProfile ? statusBarHeight+40 : UIScreen.main.bounds.height) //使用屏幕的高度来隐藏
            
            MenuButton(show: $show)
                .offset(x: -40, y: showProfile ? statusBarHeight : 80)
                .animation(.interactiveSpring())
            
            MenuRight(show: $showProfile)
                .offset(x: -16, y: showProfile ? statusBarHeight : 80)
                .animation(.interactiveSpring())
            
            MenuView(show: $show) //传递show的绑定,同步改变
        }
        .background(Color("background"))
        .edgesIgnoringSafeArea(.all)
    }
}

struct Home_Previews: PreviewProvider {
    static var previews: some View {
        Group {
            Home().previewDevice("iPhone SE")
            Home().previewDevice("iPhone Xr")
            Home().previewDevice("iPad Pro (9.7-inch)")
        }
    }
}

struct MenuRow: View {
    var image = "creditcard"
    var text = "My Account"
    var body: some View {
        HStack {
            Image(systemName: image)
                .imageScale(.large) //尺寸
                .foregroundColor(Color("icons")) //颜色，效果不出来点下三角形
                .frame(width: 32, height: 32) //边框，设置里边框，图标会一直完美居中
            Text(text)
                .foregroundColor(.primary)
                .font(.headline)
            Spacer()
        }
    }
}

struct Menu : Identifiable {
    var id = UUID()
    var title : String
    var icon : String
}

let menuData = [
    Menu(title: "My Account", icon: "person.crop.circle"),
    Menu(title: "Settings", icon: "gear"),
    Menu(title: "Billing", icon: "creditcard"),
    Menu(title: "Team", icon: "person.and.person"),
    Menu(title: "Sign out", icon: "arrow.uturn.down")
]

struct MenuView: View {
    var menu = menuData
    @Binding var show : Bool //监听主组件状态改变
    @State var settings = false
    var body: some View {
        HStack {
            VStack(alignment: .leading, spacing: 20) { //对齐方式，每项间距
                
                ForEach(menuData){ item in
                    if item.title == "Settings" {
                        Button(action: { self.settings.toggle() }){
                            MenuRow(image: item.icon, text: item.title)
                        }.sheet(isPresented: self.$settings) {
                            Settings()
                        }
                    } else {
                        MenuRow(image: item.icon, text: item.title)
                    }
                }
                
                Spacer()
            }
                .padding(.top,30) //上边距
                .padding(30) //所有内部边距
                .frame(minWidth: 0, maxWidth: 360)
                .background(Color("button"))
                .cornerRadius(30)
                .padding(.trailing,60) //右边距
                .shadow(radius: 20)
                .rotation3DEffect(Angle(degrees: show ? 0 : 60), axis: (x: 0, y: 10.0, z: 0))
                .animation(.default)
                .offset(x: show ? 0 : -UIScreen.main.bounds.width)
                .onTapGesture {
                    self.show.toggle()
            }
            Spacer()
        }
        .padding(.top, statusBarHeight)
    }
}

struct CircleButton: View {
    var icon = "person.crop.circle"
    var body: some View {
        HStack {
            Image(systemName: icon)
                .foregroundColor(.primary)
        }
        .frame(width: 44, height: 44)
        .background(Color("button"))
        .cornerRadius(30)
        .shadow(color: Color("buttonShadow"), radius: 10, x: 0, y: 10)
    }
}

struct MenuButton: View {
    @Binding var show : Bool
    var body: some View {
        ZStack {
            Button(action: {self.show.toggle()}) {
                HStack {
                    Spacer()
                    Image(systemName: "list.dash")
                        .foregroundColor(.primary)
                }
                .padding(.trailing,18)
                .frame(width: 90, height: 60)
                .background(Color("button"))
                .cornerRadius(30)
                .shadow(color: Color("buttonShadow"), radius: 10, x: 0, y: 10)
            }
            .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .topLeading)
            Spacer()
        }
    }
}

struct MenuRight: View {
    @Binding var show : Bool
    @State var showUpdate = false
    var body: some View {
        ZStack {
            HStack {
                Button(action: {self.show.toggle()}) {
                    CircleButton()
                }
                Button(action: {
                    self.showUpdate = true
                }){
                    CircleButton(icon: "bell") //未点击时的控件
                }.sheet(isPresented: self.$showUpdate){
                    UpdateList()
                }
            }
            .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .topTrailing)
            Spacer()
        }
    }
}
